<template>
	<!-- 进入模块样式组件 -->
	<view class="modularbox">
		<!-- 单行模块 -->
		<view class="flexaic modular" :class="{ 'moduactive': item.showicon }" @click="tolink(item)"
			v-for="item, index in modularlist" :key="index">
			<!--左边图标 -->
			<view v-if="item.icon" class="iconfont icon" :class="item.icon" />
			<!-- 内容模块 -->
			<view v-if="item.title" class="title">{{ item.title }}</view>
			<!-- flex撑开并且在其中添加插槽 -->
			<slot v-if="item.slotkey" :name="item.slotkey" />
			<view class="slotbox flexaic" v-if="!item.slotkey">{{ item.value }}</view>
			<!-- 进入图标 -->
			<view v-if="item.showicon" class="iconfont icon-jinru" />
		</view>
	</view>
</template>

<script>
export default {
	name: "modularbox", //进入模块样式组件
	props: {
		modularlist: { //模块数组数据
			type: Array
		},
	},
	data() {
		return {
			newlist: []
		}
	},
	methods: {
		// 点击传出地址，跳转等判断
		tolink(obj) {
			// 先执行用一次，之后隔多久执行一次
			this.way.throttle(500).then((res) => {
				if (obj.path) {
					this.rest.jump('nav', obj.path);
				} else {
					this.$emit("change", obj)
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
/* 进入模块样式组件 */
.modularbox {

	// 单行模块
	.modular {
		padding: 20rpx 0;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f3f3f3;

		// 撑开并且在其中添加插槽
		.slotbox {
			flex: 1;
			margin-right: 20rpx;
		}

		// 图标样式
		.icon {
			font-size: 40rpx;
			margin-right: 10rpx;
		}

		// 必填图标修改单独样式
		.icon-asterisk {
			margin: 0 2rpx 0 -20rpx;
			color: #d81e06;
		}

		// 进入图标
		.icon-jinru {
			font-size: 26rpx;
		}
	}

	.modular:last-child {
		border-bottom: 0;
	}

	.moduactive:active {
		opacity: .8;
	}
}
</style>